import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { Article } from '@/types/data'
import Image from '@/components/Image/Image'
import { useHistory } from 'react-router'
import { relativeTime } from '@/utils'

// console.log(dayjs('2022-04-07').fromNow())
type Props = {
  item: Article,
  /**
   * 图片类型说明
   * 0 表示无图 1 表示单图 3 表示三图
   */
  type?: 0 | 1 | 3
}

const ArticleItem = ({ item }: Props) => {
  const history = useHistory()
  const type = item.cover.type
  return (
    <div className={styles.root}>
      <div
        className={classnames('article-content', { t3: type === 3, 'none-mt': type === 0 })}
        onClick={() => history.push('/article/' + item.art_id)}
      >
        <h3>{item.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {item.cover.images.map((imgSrc, idx) => (<div key={idx} className="article-img-wrapper">
              <Image src={imgSrc} />
            </div>))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{item.aut_name}</span>
        <span>{item.comm_count} 评论</span>
        <span>{ relativeTime(item.pubdate)}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
